<template>
  <div class="preview-container">
    <h2 class="page-title">{{ page.title }}</h2>
    <template v-for="(item, index) in components" :key="index">
      <component
        :is="item.type"
        v-bind="item.props"
      />
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { pageApi } from '@/api/page'

const route = useRoute()
const page = ref({
  title: '',
  config: {
    components: []
  }
})

// 计算属性：处理组件配置
const components = computed(() => {
  if (!page.value.config) return []
  return page.value.config.components
})

// 加载页面数据
const loadPage = async (id) => {
  try {
    const data = await pageApi.getById(id)
    page.value = data
  } catch (error) {
    console.error('获取页面数据失败:', error)
  }
}

onMounted(() => {
  const { id } = route.params
  if (id) {
    loadPage(id)
  }
})
</script>

<style lang="scss" scoped>
.preview-container {
  padding: 20px;
  
  .page-title {
    margin-bottom: 20px;
    text-align: center;
  }
}
</style> 